<template>
  <p class="g-name">{{ goods?.title }}</p>
  <p class="g-desc">{{ goods?.introduce }}</p>
  <p class="g-price">
    <span>{{ goods?.price }}</span>
  </p>
  <div class="g-service">
    <dl>
      <dt>销售</dt>
      <dd>{{ goods.sellerId }}</dd>
    </dl>
    <dl>
      <dt>地址</dt>
      <dd>{{ goods.placeOfDelivery }}</dd>
    </dl>
    <dl>
      <dt>电话</dt>
      <dd>{{ goods.phonenumber }}</dd>
    </dl>
  </div>
</template>

<script lang="ts" setup>
import { NewShopItem } from "@/api/shop/shop";

interface Props {
  goods: NewShopItem;
}
defineProps<Props>();
</script>

<style lang="scss" scss>
.g-name {
  font-size: 22px;
}

.g-desc {
  margin-top: 10px;
  color: #999;
}

.g-price {
  margin-top: 10px;

  span {
    &::before {
      font-size: 14px;
      content: "¥";
    }

    &:first-child {
      margin-right: 10px;
      font-size: 22px;
      color: $priceColor;
    }
  }
}

.g-service {
  width: 500px;
  padding: 20px 10px 0;
  margin-top: 10px;
  background: #f5f5f5;

  dl {
    display: flex;
    align-items: center;
    padding-bottom: 20px;

    dt {
      width: 50px;
      color: #999;
    }

    dd {
      color: #666;

      &:last-child {
        span {
          margin-right: 10px;

          &::before {
            margin-right: 2px;
            color: $xtxColor;
            content: "•";
          }
        }

        a {
          color: $xtxColor;
        }
      }
    }
  }
}
</style>
